<template>
  <div class="dateSlide">
    <div class="swipe">
      <div class="prev" :class="{ disabled: !loopLeft }" @click="handlePrev">
        <van-icon name="arrow-left" />
      </div>
      <div class="slide">
        <van-swipe ref="swipe" :initial-swipe="swipeArray.length-1" @change="handleChange" :loop="loopLeft && loopRight" :show-indicators="false" :duration="100">
          <van-swipe-item class="swipe-list" v-for="(list, index) in swipeArray" :key="index">
            <span :class="{ active: item.active, disabled: !item.isAvailable, margin: dateType === 1 }"
            v-for="(item, int) in list"
            @click="handleClick(item)"
            :key="int">
              {{ item.label }}
            </span>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="next" :class="{ disabled: !loopRight }" @click="handleNext">
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="time">
      {{ dateParse }}
    </div>
  </div>
</template>
<script>
import moment from '@/utils/DateTimeUtils'

export default {
  props: {
    dateType: {
      type: Number,
      default: 0
    },
    startTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loopLeft: true,
      loopRight: false,
      timeStamp: '',
      rangueIndex: 4,
      swipeIndex: 4,
      swipeArray: [],
      currentTime: ''
    }
  },
  computed: {
    dateParse() {
      if (this.dateType) {
        if (this.dateType === 1) {
          let start = moment.formatToChinese(this.currentTime[0])
          let end = moment.formatToChinese(this.currentTime[1])
          let str = ''
          if (start.substring(0, 8) === end.substring(0, 8)) {
            str = start + "至" + end.substring(8, 11)
          } else {
            str = start + "至" + end.substring(5, 11)
          }
          return str
        }
        return moment.formatToChinese(this.currentTime[0]).slice(0, 8)
      }
      return moment.formatToChinese(this.currentTime)
    }
  },
  created() {
    const swipeArray = []
    for (let index = this.rangueIndex; index >= 0; index--) {
      let month = this.getDateTypeList(index)
      swipeArray.push(month)
    }
    this.swipeArray = swipeArray
    // console.log(swipeArray)
    this.setCurrentTime(swipeArray)
    let arrayTime = this.currentTime instanceof Array ? this.currentTime : [this.currentTime]
    let [ startTime, endTime ] = arrayTime
    this.$emit('dateChange', startTime, endTime, true)
  },
  methods: {
    getDateTypeList(index) {
      let ArrayList = null
      let type = this.dateType
      switch (type) {
        case 0:
          ArrayList = moment.getLastWeekDays(index)
          break;
        case 1:
          ArrayList = moment.getLastMonthWeeks(index)
          break;
        case 2:
          ArrayList = moment.getLastYearMonths(index)
          break;
        default:
          ArrayList = []
          break;
      }
      return ArrayList
    },
    handlePrev() {
      if (!this.loopLeft) return false
      let index = !this.swipeIndex ? 4 : this.swipeIndex - 1
      this.$refs.swipe.swipeTo(index)
    },
    handleNext() {
      if (!this.loopRight) return false
      let index =  this.swipeIndex === 4 ? 0 : this.swipeIndex + 1
      this.$refs.swipe.swipeTo(index)
    },
    handleClick(item) {
      if (!item.isAvailable) return false
      this.currentTime = item.time
      let startTime = ''
      let endTime = ''
      if (typeof item.time === 'object') {
        startTime = item.time[0]
        endTime = item.time[1]
      } else {
        startTime = item.time
      }
      this.$emit('dateChange', startTime, endTime)
      this.swipeArray.forEach(list => {
        list.forEach(item => {
          item.active = false
        })
      })
      item.active = true
    },
    setCurrentTime(swipeArray) {
      const currentTime = (item) => {
        if (item.active) {
          this.currentTime = item.time
        }
      }
      const fixedTime = (item) => {
        item.active = false
        let time = item.time instanceof Array ? item.time[0] : item.time
        if ( time === this.startTime) {
          item.active = true
          this.currentTime = item.time
        }
      }
      let fn = this.startTime ? fixedTime : currentTime
      swipeArray.forEach(list => {
        list.forEach(item => {
          fn(item)
        })
      })
    },
    setLoop(startTime, endTime, index) {
      let nowTime = moment.getNowDayTime()
      let mixTime = moment.getMixTime()
      // console.log(startTime > nowTime)
      // console.log(endTime, mixTime)
      if ( startTime > nowTime ) {
        this.loopRight = false
      } else if(!index && endTime < mixTime ) {
        this.loopLeft = false
      }else {
        this.loopLeft = true
        this.loopRight = true
      }
    },
    getStartOrEndTime(currentSwipe) {
      let len = currentSwipe.length - 1
      let startArray = currentSwipe[len]['time']
      let endArray = currentSwipe[0]['time']
      let startTime = startArray instanceof Array ? startArray[1] : startArray
      let endTime = endArray instanceof Array ? endArray[0] : endArray
      startTime = new Date(startTime).getTime()
      endTime = new Date(endTime).getTime()
      return { startTime, endTime }
    },
    handleChange(index) {
      let currentSwipe = this.swipeArray[index]
      let { startTime, endTime } = this.getStartOrEndTime(currentSwipe)
      this.setLoop(startTime, endTime, index)
      this.swipeIndex = index
      if (this.timeStamp) {
        let curentTime = endTime
        let weeks = null
        let int = 0
        if (this.timeStamp > curentTime) {
          // console.log('后退')
          this.rangueIndex += 1
          weeks = this.getDateTypeList(this.rangueIndex)
          int = index <=2 ? index+2 : index-3
        } else {
          // console.log('前进')
          this.rangueIndex -= 1
          let len = this.swipeArray.length - 1
          weeks = this.getDateTypeList(this.rangueIndex - len)
          int = index != len ? index + 1 : 0
        }
        weeks.forEach(item => {
          if (item.active) item.active = false
        })
        let zipData = JSON.stringify(this.swipeArray)
        let unzip = JSON.parse(zipData)
        unzip[int] = weeks
        this.swipeArray = unzip
      }
      let storageTime = endTime
      this.timeStamp = storageTime
    }
  }
}
</script>

<style lang="less" scoped>

@color-block: #292E33;
@color-blue :#007AE6;

.dateSlide {
  padding: 16px;
  padding-bottom: 0px;
  .swipe {
    line-height: 28px;
    display: flex;
    font-size: 14px;
    .prev, .next {
      width: 6%;
      font-weight: bold;
    }
    .next {
      text-align: right;
    }
    .slide {
      height: 24px;
      width: 88%;
      line-height: 24px;
      .swipe-list {
        display: flex;
        color: @color-block;
        span {
          flex: 1;
          // width: 24px;
          opacity: .75;
          margin: 0 4px;
          text-align: center;
          // flex-basis: 24px;
          // padding: 0 4px;
        }
        .active {
          color: #fff;
          opacity: 1;
          border-radius: 5px;
          background-color:@color-blue
        }
        .margin {
          margin: 0;
          padding: 0 4px
        }
      }
    }
  }
  .disabled {
    color: #ccc;
  }
  .time {
    color: @color-block;
    font-size: 14px;
    font-weight: 500;
    padding-top: 8px;
    text-align: center;
  }
}
</style>


